import React, { useState,useRef,Fragment } from "react";
import { Card, Checkbox,Radio, Divider,Button,Space,Tooltip } from 'antd';
import MCheckbox from '@mui/material/Checkbox';
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
import BookmarkIcon from '@mui/icons-material/Bookmark';
import 'antd/dist/reset.css';
import './Question.css'

const l = ['A','B','C','D','E','F','G','H']

export default function Question(props) {
  const {submit,index,question,selections,answers,setScore = () =>{},score=[],displayFlag = false,bookmarkable = true,generrateRandomOrder = false } = props
  const [answer, setAnswer] = useState([])
  const [answerFlag, setAnswerFlag] = useState(false)
  const [bookmarkFlag, setBookmarkFlag] = useState(false)
  const isSingleSelect = answers.length !== 1? true:false;
  
  const setSelectionList = () => {
    const rtn = []
    const answersIndex = []
    answers.forEach(item =>{
        answersIndex.push(l.indexOf(item))
    })
    selections.forEach((item,index) =>{
        const temp = {
            selection: item,
            isRight: answersIndex.indexOf(index) !== -1
            } 
        rtn.push(temp)
        }
    )
    return generrateRandomOrder? rtn.sort(()=>0.5 - Math.random()):rtn
  }
  const setAnswers = () =>{
    const rtn = []
    selectionList.current.forEach((item,index) =>{
        if(item.isRight){
            rtn.push(l[index])
        }
    })
    return rtn
  }
  const selectionList = useRef(setSelectionList())
  const answersList = useRef(setAnswers())
  const onAnswerChange = checkedValues => {
    const a = checkedValues.target?[checkedValues.target.value]:[...checkedValues]
     setAnswer(a)
     const sco = [...score]
     sco[index] = a.sort().toString() === answersList.current.sort().toString()? 1 : 0
     setScore([...sco])
  }
  const rightAnswers = key =>{
    if(!(answerFlag || submit)) return ''
    if(answersList.current.sort().toString() === answer.sort().toString()) return ''
    if(answersList.current.indexOf(key) === -1) return ''
    return 'right-line'
  }
  return (
    <div style={{display:displayFlag && !bookmarkFlag? 'none' : 'block',marginBottom:'30px'}}>
        <Card id={index} title={index+1 +". "+ question} extra={<div><Button type="link" onClick={()=>setAnswerFlag(!answerFlag)}>{!answerFlag? '显示答案': '隐藏答案'}</Button>{bookmarkable?<Tooltip title={bookmarkFlag?"取消标记":"标记问题"}><MCheckbox disabled={displayFlag} onClick={()=>setBookmarkFlag(!bookmarkFlag)} icon={<BookmarkBorderIcon/>} checkedIcon={<BookmarkIcon/>}/></Tooltip>:null}</div>} className={'Card'}> 
        <Fragment>
            {isSingleSelect?
                <Checkbox.Group onChange={onAnswerChange} style={{ display: 'block' }}>
                    <Space direction="vertical">
                        {selectionList.current.map((item,i)=>(<Checkbox className={rightAnswers(l[i])} key={i} value= {l[i]} style={{ pointerEvents:answerFlag || submit? 'none':'auto' }}><strong>{l[i]}. </strong><span dangerouslySetInnerHTML={{__html:item.selection}}/></Checkbox>))}
                    </Space>
                </Checkbox.Group>:
                <Radio.Group onChange={onAnswerChange} style={{ display: 'block' }}>
                    <Space direction="vertical">
                        {selectionList.current.map((item,i)=>(<Radio className={rightAnswers(l[i])} key={i} value= {l[i]} style={{ pointerEvents:answerFlag || submit? 'none':'auto' }}><strong>{l[i]}. </strong><span dangerouslySetInnerHTML={{__html:item.selection}}/></Radio>))}
                    </Space>
                </Radio.Group>
            }
        </Fragment>
        {answerFlag || submit? 
        <div>
            <Divider>答案</Divider>
            <Space style={{ fontSize: '36px' }}>
                {answersList.current.sort().toString() === answer.sort().toString()?
                    <span style={{ color:'green' }} role="img" aria-label="check-circle" className="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
                :   <span style={{ color:'red' }} role="img" aria-label="close-circle" className="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
                }
                <span>{answersList.current}</span>
            </Space>
        </div>:null}
        </Card> 
    </div>

  )
}
